
<!-- Login.vue -->
<script setup>import { ref, reactive, onMounted, onBeforeUnmount,getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {ElMessage} from "element-plus";
import {UserStore} from "../store/pcUser.js";
import {Message, Phone, User} from "@element-plus/icons-vue";


const userStore = UserStore();
const {proxy}=getCurrentInstance();

// 表单数据
const loginForm = reactive({pc_user_id: '',
  phone: '',
  username:'',
  password: '',
})


const adminDialogVisible = ref(false)
const adminList = ref([])
const loadingAdminInfo = ref(false)

// 状态管理
const loading = ref(false)
const errorMessage = ref('')
let errorTimeout = null // 错误信息定时器

// 路由实例
const router = useRouter()

let listMenu = ref([]);
// Login.vue 中改造 menuList
const menuList = () => {
  return proxy.$axios.get("/pcUser/getMenuList", {
    params: { pc_user_id: userStore.userInfo.pc_user_id } // 登录后需保证 pc_user_id 存在
  }).then((serverData) => {
    if (serverData.data.code === 0) {
      // 提取菜单路径（假设后端返回的菜单数据结构是 { url: "/home/dashboard" } ）
      const menuURLArray = serverData.data.data.map(menu => menu.url);
      userStore.userInfo.list = menuURLArray; // 更新菜单列表（关键：路由守卫依赖此数据）
      return menuURLArray; // 返回成功的菜单列表
    } else {
      // 菜单请求失败，抛出错误供上层捕获
      ElMessage.error('菜单获取失败，请联系管理员');
      return Promise.reject(new Error(`菜单接口错误码：${serverData.data.code}`));
    }
  }).catch((error) => {
    console.error('菜单请求异常:', error);
    ElMessage.error('网络异常，菜单获取失败');
    return Promise.reject(error); // 继续抛出错误
  });
};



// 登录处理
// 替换原有的 handleLogin 函数
const handleLogin = async () => {
  // 清除之前的定时器
  if (errorTimeout) {
    clearTimeout(errorTimeout);
    errorTimeout = null;
  }

  if (!loginForm.username || !loginForm.password) {
    errorMessage.value = '请输入用户名和密码';
    errorTimeout = setTimeout(() => {
      errorMessage.value = '';
    }, 3000);
    return;
  }

  loading.value = true;
  errorMessage.value = '';

  try {
    // 1. 发起登录请求（await 等待结果）
    const ServerData = await proxy.$axios.get("/pcUser/login", {
      params: {
        username: loginForm.username,
        password: loginForm.password,
      },
    });

    if (ServerData.data.code === 0) {
      // 2. 保存用户信息（包含 pc_user_id）
      userStore.userInfo = ServerData.data.data;
      if (ServerData.data.saTokenInfo) {
        userStore.userInfo.saTokenInfo = ServerData.data.saTokenInfo;
      }

      console.log("登录成功", userStore.userInfo);

      // 3. 等待菜单请求完成（关键：确保 list 已更新）
      await menuList();

      ElMessage.success("登录成功");
      router.push('/home'); // 菜单加载完成后再跳转
    } else {
      ElMessage.error("用户名或密码错误");
    }
  } catch (error) {
    console.log("请求发生异常", error);
    ElMessage.error("登录失败,请稍后重试");
  } finally {
    loading.value = false;
  }
};


const handleForgotPassword = async () => {
  // 显示弹窗并开始加载数据
  adminDialogVisible.value = true
  loadingAdminInfo.value = true

  // 调用后台接口获取管理员信息
    proxy.$axios.get("/pcUser/adminInfo"
    ).then((response) => {
      if (response.data.code === 1) {
        adminList.value = response.data.data
      } else {
        ElMessage.error("管理员信息获取失败")
      }
    }).catch((error) => {
      console.log("请求发生异常", error);
      ElMessage.error("管理员信息获取失败");
    }).finally(() => {
      loadingAdminInfo.value = false
    })
}
// 回车登录
const handleKeyPress = (event) => {
  if (event.key === 'Enter') {
    handleLogin()
  }
}

// 动态背景效果
const floatingShapes = ref([])
const animatedLines = ref([])
const pulsatingCircles = ref([])

// 创建浮动形状
const createFloatingShapes = () => {
  const shapeCount = 10
  const shapes = []

  for (let i = 0; i < shapeCount; i++) {
    shapes.push({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 150 + 80, // 更大的尺寸 80-230px
      speedX: (Math.random() - 0.5) * 0.3,
      speedY: (Math.random() - 0.5) * 0.3,
      rotation: Math.random() * 360,
      rotationSpeed: (Math.random() - 0.5) * 1,
      shape: Math.random() > 0.6 ? 'circle' : Math.random() > 0.3 ? 'square' : 'hexagon',
      opacity: Math.random() * 0.2 + 0.2 // 更明显的透明度 0.2-0.4
    })
  }

  floatingShapes.value = shapes
}

// 创建动画线条
const createAnimatedLines = () => {
  const lineCount = 12
  const lines = []

  for (let i = 0; i < lineCount; i++) {
    lines.push({
      id: i,
      x1: Math.random() * 100,
      y1: Math.random() * 100,
      x2: Math.random() * 100,
      y2: Math.random() * 100,
      length: Math.random() * 80 + 50, // 更长的线条 50-130px
      angle: Math.random() * 360,
      speed: (Math.random() - 0.5) * 1.5,
      opacity: Math.random() * 0.4 + 0.3, // 更明显的透明度 0.3-0.7
      width: Math.random() * 3 + 2 // 更粗的线条 2-5px
    })
  }

  animatedLines.value = lines
}

// 创建脉动圆圈
const createPulsatingCircles = () => {
  const circleCount = 8
  const circles = []

  for (let i = 0; i < circleCount; i++) {
    circles.push({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 100 + 50, // 50-150px
      pulseSpeed: Math.random() * 2 + 1, // 1-3
      opacity: Math.random() * 0.3 + 0.2 // 0.2-0.5
    })
  }

  pulsatingCircles.value = circles
}

// 更新浮动形状位置
const updateFloatingShapes = () => {
  floatingShapes.value.forEach(shape => {
    shape.x += shape.speedX
    shape.y += shape.speedY
    shape.rotation += shape.rotationSpeed

    // 边界检查
    if (shape.x > 100) shape.x = 0
    if (shape.x < 0) shape.x = 100
    if (shape.y > 100) shape.y = 0
    if (shape.y < 0) shape.y = 100
  })
}

// 更新线条位置
const updateAnimatedLines = () => {
  animatedLines.value.forEach(line => {
    line.angle += line.speed

    // 重新计算线条坐标
    const centerX = (line.x1 + line.x2) / 2
    const centerY = (line.y1 + line.y2) / 2

    line.x1 = centerX + Math.cos(line.angle * Math.PI / 180) * line.length / 2
    line.x2 = centerX - Math.cos(line.angle * Math.PI / 180) * line.length / 2
    line.y1 = centerY + Math.sin(line.angle * Math.PI / 180) * line.length / 2
    line.y2 = centerY - Math.sin(line.angle * Math.PI / 180) * line.length / 2

    // 边界检查
    if (line.x1 > 100) line.x1 = 0
    if (line.x1 < 0) line.x1 = 100
    if (line.y1 > 100) line.y1 = 0
    if (line.y1 < 0) line.y1 = 100
  })
}

// 更新脉动圆圈
const updatePulsatingCircles = () => {
  pulsatingCircles.value.forEach(circle => {
    // 脉动效果
    circle.size = 50 + Math.sin(Date.now() / 1000 * circle.pulseSpeed) * 30
  })
}

let animationFrameId
let updateInterval

// 开始动画
const startAnimation = () => {
  const animate = () => {
    updateFloatingShapes()
    updateAnimatedLines()
    updatePulsatingCircles()
    animationFrameId = requestAnimationFrame(animate)
  }
  animate()

  updateInterval = setInterval(() => {
    updateFloatingShapes()
    updateAnimatedLines()
    updatePulsatingCircles()
  }, 40)
}

// 清理动画和定时器
onBeforeUnmount(() => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
  }
  if (updateInterval) {
    clearInterval(updateInterval)
  }
  // 清理错误信息定时器
  if (errorTimeout) {
    clearTimeout(errorTimeout)
  }
})

// 初始化
onMounted(() => {
  createFloatingShapes()
  createAnimatedLines()
  createPulsatingCircles()
  startAnimation()
})
</script>

<template>
  <div class="login-container">
    <!-- 脉动圆圈 -->
    <div
        v-for="circle in pulsatingCircles"
        :key="'circle-' + circle.id"
        class="pulsating-circle"
        :style="{
        left: circle.x + '%',
        top: circle.y + '%',
        width: circle.size + 'px',
        height: circle.size + 'px',
        opacity: circle.opacity
      }"
    ></div>

    <!-- 浮动大块形状 -->
    <div
        v-for="shape in floatingShapes"
        :key="'shape-' + shape.id"
        class="floating-shape"
        :class="shape.shape"
        :style="{
        left: shape.x + '%',
        top: shape.y + '%',
        width: shape.size + 'px',
        height: shape.size + 'px',
        transform: `rotate(${shape.rotation}deg)`,
        opacity: shape.opacity
      }"
    ></div>

    <!-- 动画线条 -->
    <svg class="lines-container" width="100%" height="100%">
      <line
          v-for="line in animatedLines"
          :key="'line-' + line.id"
          :x1="line.x1 + '%'"
          :y1="line.y1 + '%'"
          :x2="line.x2 + '%'"
          :y2="line.y2 + '%'"
          class="animated-line"
          :style="{
          opacity: line.opacity,
          'stroke-width': line.width
        }"
      />
    </svg>

    <div class="login-box">
      <div class="login-header">
        <!-- 使用默认图标代替logo图片 -->
        <div class="logo-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1d8cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M12 1v6m0 6v6"></path>
            <path d="m19 5-4.5 4.5"></path>
            <path d="M23 12h-6"></path>
            <path d="m19 19-4.5-4.5"></path>
            <path d="M12 23v-6"></path>
            <path d="m5 19 4.5-4.5"></path>
            <path d="M1 12h6"></path>
            <path d="m5 5 4.5 4.5"></path>
          </svg>
        </div>
        <h1>医院后台管理系统</h1>
        <p>Medical Management System</p>
      </div>

      <el-form
          :model="loginForm"
          class="login-form"
          @keyup="handleKeyPress"
      >
        <el-form-item class="form-item">
          <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              size="large"
              prefix-icon="User"
              clearable
              class="custom-input"
          />
        </el-form-item>

        <el-form-item class="form-item">
          <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              size="large"
              prefix-icon="Lock"
              show-password
              class="custom-input"
          />
        </el-form-item>

        <el-dialog
            v-model="adminDialogVisible"
            title="联系管理员"
            width="400px"
            :show-close="true"
            :close-on-click-modal="true"
            :close-on-press-escape="true"
        >
          <div class="admin-info-container">
            <el-skeleton :loading="loadingAdminInfo" animated :count="2">
              <template #template>
                <div class="admin-info-skeleton">
                  <div class="admin-item">
                    <el-skeleton-item variant="circle" style="width: 50px; height: 50px; margin-right: 15px;" />
                    <div style="flex: 1;">
                      <el-skeleton-item variant="h3" style="width: 40%; height: 20px; margin-bottom: 10px;" />
                      <el-skeleton-item variant="p" style="width: 60%; height: 16px;" />
                    </div>
                  </div>
                </div>
              </template>

              <template #default>
                <div class="admin-info-content">
                  <h3>如有账户问题，请联系以下管理员：</h3>
                  <div v-if="adminList.length === 0" class="no-admins">
                    暂无管理员信息
                  </div>
                  <div v-else class="admin-list">
                    <div
                        v-for="(admin, index) in adminList"
                        :key="index"
                        class="admin-item"
                    >
                      <div class="admin-avatar">
                        <el-icon :size="24" color="#1d8cf8"><User /></el-icon>
                      </div>
                      <div class="admin-details">
                        <h4>{{ admin.username }}</h4>
                        <p><el-icon><Phone /></el-icon> {{ admin.phone }}</p>
                        <p v-if="admin.email"><el-icon><Message /></el-icon> {{ admin.email }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>

          <template #footer>
      <span class="dialog-footer">
        <el-button @click="adminDialogVisible = false">关闭</el-button>
      </span>
          </template>
        </el-dialog>

        <el-form-item class="form-item">
          <div class="remember-forgot">
            <el-link
                type="primary"
                :underline="false"
                class="forgot-password"
                @click="handleForgotPassword"
            >
              忘记密码?
            </el-link>
          </div>
        </el-form-item>

        <el-form-item class="form-item">
          <el-button
              type="primary"
              size="large"
              class="login-button"
              :loading="loading"
              @click="handleLogin"
          >
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 错误消息区域 - 直接显示，不使用过渡动画 -->
      <div class="error-container">
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
      </div>

      <div class="login-footer">
        <p>为生命护航，为健康守护</p>
      </div>
    </div>
  </div>{{userStore.userInfo}}
</template>

<style scoped>

.admin-dialog {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.admin-dialog :deep(.el-dialog__body) {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
}

.admin-info-container {
  text-align: center;
  padding: 20px;
}

.admin-info-skeleton .admin-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.admin-info-content h3 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.no-admins {
  text-align: center;
  padding: 20px;
  color: #999;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.admin-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
  transition: all 0.3s;
}

.admin-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.admin-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  border: 1px solid #1d8cf8;
}

.admin-details {
  flex: 1;
  text-align: left;
}

.admin-details h4 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 16px;
}

.admin-details p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}

.admin-details p el-icon {
  margin-right: 5px;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-dialog {
    width: 90% !important;
    max-height: 90vh;
  }

  .admin-dialog :deep(.el-dialog__body) {
    max-height: 70vh;
  }
}


/* 错误消息样式 */
.error-message {
  color: #ff4d4f;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 10px;
  background: rgba(255, 77, 79, 0.15);
  border: 2px solid rgba(255, 77, 79, 0.3);
  box-shadow: 0 5px 15px rgba(255, 77, 79, 0.2);
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
  width: 100%;
  box-sizing: border-box;
}

/* 错误消息容器 - 预留空间 */
.error-container {
  min-height: 60px; /* 预留空间，避免内容跳动 */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-12px); }
  40%, 80% { transform: translateX(12px); }
}

.remember-forgot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.forgot-password {
  margin-left: auto;
  flex-shrink: 0;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1d8cf8, #3358f4);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 脉动圆圈 */
.pulsating-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  animation: hueRotate 10s infinite linear;
}

/* 浮动大块形状 */
.floating-shape {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transform-origin: center;
  animation: hueRotate 15s infinite linear;
}

.floating-shape.circle {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

.floating-shape.square {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
  transform-origin: center;
}

.floating-shape.hexagon {
  background: transparent;
  border: 3px solid rgba(255, 255, 255, 0.5);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* 动画线条容器 */
.lines-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.animated-line {
  stroke: white;
  stroke-linecap: round;
}

.login-box {
  width: 33.33vw; /* 占屏幕宽度的三分之一 */
  min-width: 360px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  z-index: 10;
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transform: translateZ(0);
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #1d8cf8, #3358f4, #1d8cf8);
  z-index: 2;
  animation: gradientShift 2s linear infinite;
  background-size: 300% 300%;
  box-shadow: 0 5px 15px rgba(29, 140, 248, 0.5);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo-placeholder {
  width: 100px;
  height: 100px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(29, 140, 248, 0.6);
  animation: pulse 1.5s infinite, rotate 15s linear infinite;
  position: relative;
  overflow: hidden;
  border: 3px solid #1d8cf8;
}

.logo-placeholder::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(45deg, transparent, rgba(29, 140, 248, 0.4), transparent);
  transform: rotate(45deg);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translate(-100%, -100%);
  }
  100% {
    transform: rotate(45deg) translate(100%, 100%);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(29, 140, 248, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(29, 140, 248, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(29, 140, 248, 0);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.login-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.login-header p {
  color: #666;
  font-size: 16px;
  letter-spacing: 1.5px;
  font-weight: 500;
}

.login-form {
  margin-bottom: 25px;
}

.form-item {
  margin-bottom: 28px;
}

.custom-input {
  width: 100%;
}

.form-item :deep(.el-input__wrapper) {
  width: 100%;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  height: 55px;
  border: 2px solid transparent;
}

.form-item :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 3px #1d8cf8, 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
  border-color: #1d8cf8;
}

.form-item :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 3px #1d8cf8, 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: #1d8cf8;
}

.form-item :deep(.el-button) {
  width: 100%;
  border-radius: 12px;
  height: 55px;
  font-size: 18px;
  letter-spacing: 3px;
  font-weight: 700;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(29, 140, 248, 0.4);
}

.form-item :deep(.el-button:hover) {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(29, 140, 248, 0.6);
}

.form-item :deep(.el-button:active) {
  transform: translateY(-2px);
}

.login-footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.login-footer p {
  color: #666;
  font-size: 14px;
  margin: 8px 0;
  letter-spacing: 1px;
  font-weight: 500;
}

.login-button {
  background: linear-gradient(90deg, #1d8cf8, #3358f4);
  border: none;
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: 0.6s;
}

.login-button:hover::before {
  left: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-box {
    width: 90vw;
    min-width: auto;
  }

  .login-header h1 {
    font-size: 24px;
  }

  .logo-placeholder {
    width: 80px;
    height: 80px;
  }

  .floating-shape {
    opacity: 0.15;
  }
}
</style>